<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2024/2/21
  Time: 21:43
  To change this template use File | Settings | File Templates.
--%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<html>
<head>
    <title>商店-</title>
</head>
<link rel="stylesheet" href="css/store.css">
<script type="text/javascript" src="js/jquery.min.js"></script>
<body>
<%@include file="header.jsp" %>
<section>
    <div id="top">
        <div id="store-info">
        </div>
    </div>
    <div>
        <p></p>
    </div>
    <div id="center">
        <div id="center-left">
            <ul id="opt">
                <li class="sorting-p"><span> ↓ </span>价格</li>
                <li class="sorting-t"><span> ↓ </span>最新</li>
            </ul>
            <div id="recommend">
                <ul id="recommend-commodity">
                    <li> 商 品 推 荐</li>
                </ul>
            </div>
        </div>
        <div id="center-right">
            <ul id="commodity">

            </ul>
        </div>
    </div>

    <div class="show-hide commodity">
        <div class="modify-top"><span>修改头像</span><span onclick="show_hide('.commodity')">×</span></div>
        <div class="line">
            <div class="modify-center">
                <label for="commodityName">商品标题：</label>
                <input type="text" id="commodityName" placeholder="请输入商品标题"><br>
                <label for="commodityBrand">商品品牌：</label>
                <input type="text" id="commodityBrand" placeholder="请输入商品品牌"><br>
                <label for="commodityPrice">商品价格：</label>
                <input type="number" id="commodityPrice"  placeholder="请输入商品价格，不超过99999元"><br>
                <label for="commodityDetails">商品详情：</label>
                <input type="text" id="commodityDetails"  placeholder="请输入商品品牌，如：商品重量：10kg,材质：蓬松土，之间用,隔开"><br>
                <label for="commodityNumber">商品库存：</label>
                <input type="number" id="commodityNumber" placeholder="请输入商品库存"><br>
                <label for="commodityFile">商品图片：</label>
                <div class="custom-file-upload">
                    <label for="commodityFile" class="addCommodity">选择文件</label>
                    <input type="file" multiple id="commodityFile" style="display:none;" accept="image/*">
                    <button>选择文件</button>
                    <span id="fileCount"></span>
                </div>
                <br>
            </div>
            <div class="modify-footer">
                <a class="btn-confirm commodity-button">添加商品</a>
                <a href="#" class="btn-cancel" onclick="show_hide('.commodity')">取消</a>
            </div>
        </div>
    </div>
</section>
<%@include file="footer.jsp" %>
<script>
    window.onload = function () {
        const params = new URLSearchParams(window.location.search);
        const storeId = params.get("storeId");
        getStore(storeId); // 商店信息初始化
        getStoreCommodityAll(storeId); // 商店商品初始化
        getStoreCommodity()
    }

    function show_hide(el) {
        if (el == ".commodity") {
            $(el).toggle();
        }
    }

    function getStore(storeId) {
        const store_info = $("#store-info");
        let store_single = "";
        $.ajax({
            type: "post",
            url: "store/getStore",
            data: {
                storeId: storeId
            },
            success: function (res) {
                if (res.msg == "success") {
                    store_single =
                        "<img src='../" + res.data.storeImg + "'>" +
                        "<div id=\"store-title\">" +
                        "<p>" + res.data.storeName + "</p>" +
                        "<button id='concern'>+关注</button></div><div id=\"contact\">💬</div>";
                    store_info.append(store_single);
                    concernStore(res.data.storeId);
                    $("#concern").click(function () {
                        let user = localStorage.getItem("userJson");
                        user = eval('(' + user + ')');
                        let userId = user.userId;
                            if ($("#concern").text() == "+关注") {
                                $.ajax({
                                    type: "POST",
                                    url: "concern/addConcern",
                                    data: {
                                        userId: userId,
                                        storeId: storeId
                                    },
                                    success: function (res) {
                                        if (res == "success") {
                                            alert("关注成功")
                                            window.location.reload();
                                        } else if (res == "fail") {
                                            alert("关注失败")
                                        }
                                    },
                                    error: function () {
                                        alert("error");
                                    }
                                })
                            } else {
                                alert("您已关注此商店")
                            }
                    });
                } else if (res.msg == "fail") {
                    alert("没有此商店")
                }
            },
            error: function () {
                alert("error");
            }
        })
    }

    function getStoreCommodityAll(storeId) {
        const sorting_p = $(".sorting-p span").text();
        const sorting_t = $(".sorting-t span").text();
        let store_commodity = "";
            const commodity = $("#commodity");
            if (sorting_p == "↓") {
                sorting_p == "降序";
            } else if (sorting_p == "↑") {
                sorting_p == "升序";
            }
            if (sorting_t == "↓") {
                sorting_t == "最新";
            } else if (sorting_t == "↑") {
                sorting_t == "以前";
            }
            $.ajax({
                type: "POST",
                url: "commodity/getStoreCommodityAll",
                data: {
                    storeId: storeId,
                    sorting_p: sorting_p,
                    sorting_t: sorting_t
                },
                success: function (res) {
                    console.log(res)
                    if (res.msg == "success") {
                        let user = localStorage.getItem("userJson");
                        user = eval('(' + user + ')');
                        for (let i = 0; i < res.data.length; i++) {
                            if (res.data[i].state == -1) {
                                if (user.userStore == res.data[i].commodityStoreId) {
                                    store_commodity +=
                                        "<li><a onclick='alert(\"商品正在审核中……\")'>" +
                                        "<img src='../" + res.data[i].commodityImgList[0].commodityImg + "'>" +
                                        "<p>" + res.data[i].commodityName + "</p>" +
                                        "<p class='red'>￥" + res.data[i].commodityPrice + "</p>" +
                                        "<span class='process'>审核中</span>";
                                }
                            }
                            if (res.data[i].state == 1) {
                                store_commodity +=
                                    "<li><a href='/patMall/commodityDetails.jsp?commodityId=" + res.data[i].commodityId + "'>" +
                                    "<img src='../" + res.data[i].commodityImgList[0].commodityImg + "'>" +
                                    "<p>" + res.data[i].commodityName + "</p>" +
                                    "<p>￥" + res.data[i].commodityPrice + "</p>" +
                                    "<div class=\"operate\">" +
                                    "<a href='buyCommodity.jsp?commodityId=" + res.data[i].commodityId + "' class=\"purchase\">购买</a>" +
                                    "<a href='#' class=\"delete\">删除</a></div></a></li>";
                            }
                        }
                        commodity.append(store_commodity);
                    } else if (res.msg == "fail") {
                        commodity.append("<p>未上传商品</p>");
                    }
                },
                error: function () {
                    alert("error");
                }
            })
    }

    const sorting_p = $(".sorting-p span");
    const sorting_t = $(".sorting-t span");
    $(sorting_p).click(function () {
        const params = new URLSearchParams(window.location.search);
        const storeId = params.get("storeId");
        getStoreCommodityAll(storeId);
    })
    $(sorting_t).click(function () {
        const params = new URLSearchParams(window.location.search);
        const storeId = params.get("storeId");
        getStoreCommodityAll(storeId);
    })
    $(".commodity-button").click(function () {
        addCommodity();
    })
    function addCommodity() {
        const commodityName = $("#commodityName").val();
        const commodityBrand = $("#commodityBrand").val();
        const commodityPrice = $("#commodityPrice").val();
        const commodityDetails = $("#commodityDetails").val();
        const commodityNumber = $("#commodityNumber").val();
        const params = new URLSearchParams(window.location.search);
        const storeId = params.get("storeId");
        const formData = new FormData();
        let fileInput = $("#commodityFile")[0];
        for (let i = 0; i < fileInput.files.length && i < 7; i++) {
            formData.append('files[]', fileInput.files[i]);
        }
        formData.append("commodityName", commodityName);
        formData.append("commodityBrand", commodityBrand);
        formData.append("commodityPrice", commodityPrice);
        formData.append("commodityDetails", commodityDetails);
        formData.append("commodityNumber", commodityNumber);
        formData.append("commodityStoreId", storeId);
        $.ajax({
            type: "POST",
            url: "commodity/addCommodity",
            data: formData,
            processData: false,
            contentType: false,
            success: function (res) {
                if (res.code == 0) {
                    alert("添加成功")
                    $(".commodity").toggle();
                } else if (res.code == 1) {
                    alert("添加失败")
                    $(".commodity").toggle();
                }
            },
            error: function () {
                alert("error");
            }
        })
    }

    function getStoreCommodity() {
        const recommend_commodity = $("#recommend-commodity");
        let html = "";
        $.ajax({
            type: "post",
            url: "commodity/getStoreCommodity",
            success: function (res) {
                if (res.msg == "success") {
                    console.log(res)
                    for (let i = 0; i < res.data.length; i++) {
                        html =
                            "<li><a href='/patMall/commodityDetails.jsp?commodityId=" + res.data[i].commodityId + "'>" +
                            "<img src='../" + res.data[i].commodityImgList[0].commodityImg + "'>" +
                            "<p>" + res.data[i].commodityName + "</p>" +
                            "<p>￥" + res.data[i].commodityPrice + "</p><div class=\"operate\">" +
                            "<a href='buyCommodity.jsp?commodityId=" + res.data[i].commodityId + "' class=\"purchase\">购买</a>" +
                            "<a href='#' class=\"delete\">删除</a></div></a></li>";
                        recommend_commodity.append(html);
                    }
                } else if (res.msg == "fail") {
                    alert("商品查询失败");
                } else if (res.msg == "NoFound") {
                    alert("没有商品");
                }
            },
            error: function () {
                alert("Error");
            }
        })
    }

    function concernStore(storeId) {
        const opt = $("#opt");
        console.log(storeId)
        let user = localStorage.getItem("userJson");
        user = eval('(' + user + ')');
        if (user != null) {
            if (user.userStore == storeId) {
                opt.append("<li onclick=\"show_hide('.commodity')\"> 添 加 商 品</li>");
            for (let i = 0; i < user.concernList.length; i++) {
                if (user.concernList[i].storeId == parseInt(storeId)) {
                    $("#concern").addClass("ask-concern");
                    $("#concern").text("已关注");
                }
            }
            }else{
                $("#concern").remove();
            }
        } else {
            alert("请登录后再关注");
        }
    }
</script>
</body>
</html>
